<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* * {
      margin: 0;
      padding: 0;
    } */

    .wrap {
      width: 400px;
      margin: 20px auto;
    }

    .list_one button {
      display: none;
    }

    .list_one:hover {
      background: red;
    }

    .list_one:hover button {
      display: inline-block;
    }

    .list_one .active {
      text-decoration: line-through;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div>
      <input type="text" id="todoTxt"> <button id="add">提交</button>
    </div>
    <div class="list_wrap">
      <ul class="list">
        <li class="list_one">
          <input type="checkbox"> <span>吃饭</span>
          <button>×</button>
        </li>
      </ul>
    </div>
    <div class="btn_wrap">
      <button id="all">查看全部</button>
      <button id="done">查看已做</button>
      <button id="todo">查看未做</button>
    </div>
  </div>
  <script>
    var todolist = [];
    if (localStorage.todolist) {
      todolist = JSON.parse(localStorage.todolist)
    } else {
      localStorage.todolist = JSON.stringify([])
    }
    var add = document.getElementById("add");
    var todoTxt = document.getElementById("todoTxt")//输入框
    add.onclick = function () {
      if (todoTxt.value) {
        var obj = {
          id: +new Date(),
          isFinish: false,
          totxt: todoTxt.value
        }
        todolist.push(obj)
        localStorage.todolist = JSON.stringify(todolist)
        loadList(todolist)
      } else {
        alert("输入内容")
      }
      // 清空输入框
      todoTxt.value = ""
    }
    // 渲染部分
    var list = document.querySelector(".list")
    function loadList(arr) {
      var str = ''
      for (var i = 0; i < arr.length; i++) {
        str += `  <li class="list_one">
          <input type="checkbox" onchange="changeCks(${i},this)" class="cks" ${arr[i].isFinish ? 'checked' : ''}> <span class="${arr[i].isFinish ? 'active' : ''}">${arr[i].totxt}</span>
          <button onclick="del(${arr[i].id})">×</button >
        </li >`
      }
      list.innerHTML = str;
    }
    loadList(todolist)
    //每个复选框的选中事件
    function changeCks(index, that) {
      if (that.checked) {
        todolist[index].isFinish = true;
      } else {
        todolist[index].isFinish = false;
      }
      localStorage.todolist = JSON.stringify(todolist)
      loadList(todolist)
    }

    //
    var btns = document.querySelectorAll(".btn_wrap button");
    for (var i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {

        // -----------------------
        for (var j = 0; j < btns.length; j++) {
          btns[j].style.color = "black"
        }
        this.style.color = "red";
        // ----------------
        var arr = [];
        if (this.innerHTML == "查看全部") {
          loadList(todolist)
        } else if (this.innerHTML == "查看已做") {
          for (var i = 0; i < todolist.length; i++) {
            if (todolist[i].isFinish) {
              arr.push(todolist[i])
            }
          }
          loadList(arr)
        } else if (this.innerHTML == "查看未做") {
          for (var i = 0; i < todolist.length; i++) {
            if (!todolist[i].isFinish) {
              arr.push(todolist[i])
            }
          }
          loadList(arr)
        }
      }
    }
    // 删除--------------------
    function del(id) {
      for (var i = 0; i < todolist.length; i++) {
        if (id == todolist[i].id) {
          todolist.splice(i, 1)
        }
      }
      localStorage.todolist = JSON.stringify(todolist);
      loadList(todolist)
    }
  </script>
</body>

</html>